<template>
  <div>
    <!-- ======== loading ============ -->
    <van-loading
      style="margin: 2.5rem 0rem"
      class="loading"
      v-if="listLoading"
      type="spinner"
      :vertical="true"
    />
    <van-list
      v-if="talentList.length"
      v-model="loading"
      :finished="finished"
      finished-text
      @load="onLoad"
      :immediate-check="false"
    >
      <div
        class="sh_talent"
        v-for="(item, index) in talentList"
        :key="index"
        @click="toTalentPage(item)"
      >
        <div class="sh_talent_i">
          <img v-lazy="item.logo" v-errorImg:talent/>
          <div class="liveAnimation" v-if="item.live_status == 1">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="sh_talent_r">
          <div class="t">{{ item.nickname }}</div>
          <div class="b">粉丝数: {{ format_num(item.total_fans) }}</div>
        </div>
      </div>
    </van-list>
    <!-- ======== 达人缺省图 ============= -->
    <div class="no_data" v-if="!talentList.length && !listLoading">
      <img src="@/assets/one/zw.png" alt />
      <div class="zw">暂时没有找到您想要的达人，请添加收录~</div>
      <button class="addIdn" @click="goPage">
        <img src="../../assets/three/addIcon.png" alt />
        添加收录
      </button>
    </div>
    <div class="theend" v-if="countta && !listLoading && talentList.length && !this.hasRoot">
      没有找到您想找的达人？
      <span @click="goPage">添加收录</span>
    </div>
    <IncludedBut v-if="!active && talentList.length && !listLoading" :search="keytext"></IncludedBut>
    <!-- vip权限 -->
    <noPower v-if="hasRoot && !listLoading" :isRank="true"/>
  </div>
</template>
<script>
import IncludedBut from './IncludedBut.vue';
import errorImg from '@/assets/img/superman.png'; //图片

export default {
  components: { IncludedBut },
  props: ['valueSerach'],
  data() {
    return {
      active: 0,
      keytext: this.$route.query.name, // 搜索关键词
      listLoading: false, //列表搜索loading
      loading: false,
      talentList: [], //达人列表
      countta: false, // 达人是否触底
      pageta: 1, // 达人当前页数
      finished: false, // 触底
      hasRoot: false, // 有无权限
      errorImg: errorImg
    };
  },
  watch: {
    valueSerach(valueSerach) {
      if (valueSerach == '') {
        // 传空值时会代入空字符，不传时接口也不代入
        this.pageta = 1;
        this.keytext = '';
        this.countta = false;
        this.talentList = [];
        this.hasRoot = false;
        this.finished = false;
        this.gettalents();
      }
    }
  },
  created() {
    this.keytext = this.valueSerach;
    this.gettalents();
  },
  methods: {
    search(i) {
      this.keytext = i;
      this.pageta = 1;
      this.countta = false;
      this.talentList = [];
      this.hasRoot = false;
      this.finished = false;
      this.gettalents();
    },
    // 添加收录
    goPage() {
      let that = this;
      this.$router.push({
        path: '/addIndexed',
        query: { search: this.keytext }
      });
    },
    // 达人搜索数据
    gettalents() {
      this.listLoading = (this.pageta == 1);
      this.loading = true;
      this.$axios
        .post('/api/author/search', {
          gender: 3,
          category: 0,
          is_shop: 0,
          is_top_sale: 0,
          keyword: this.keytext, // 搜索文案
          more_gender: 3,
          order_by: 'desc',
          page: this.pageta, // 当前 页数
          size: 10, // 页容量
          sort: '',
          verify_type: 3
        })
        .then(res => {
          this.listLoading = false;
          this.loading = false;
          if (res.data.code == 0) {
            this.talentList = this.talentList.concat(res.data.data);
            if (res.data.count == this.talentList.length) {
              this.countta = true;
              this.finished = true;
            }
          } else if (res.data.code == 1003 || res.data.code == 1013) {
            this.hasRoot = true; //无权限
            this.loading = false;
            // this.finished = true;
          }
        });
    },
    // 达人 触底
    onLoad() {
      if (this.pageta * 10 > this.talentList.length) {
        this.listLoading = false;
        this.loading = false;
        this.finished = false;
      } else if (this.talentList.length) {
        this.pageta = this.pageta + 1;
        this.gettalents();
      }
    },
    // 跳转达人详情
    toTalentPage(item) {
      this.$router.push({
        path: 'talentDetailsMain',
        query: {
          id: item.author_id
        }
      });
    }
  }
};
</script>
<style  scoped lang="less">
.sh_talent {
  width: 100%;
  height: 1.72rem;
  margin-top: 0.266667rem;
  background-color: #fff;
  border-radius: 0.133333rem;
  display: flex;
  align-items: center;
  padding-left: 0.266667rem;
  box-sizing: border-box;
  .sh_talent_i {
    position: relative;
    width: 1.173333rem;
    height: 1.173333rem;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .sh_talent_r {
    margin-left: 0.266667rem;
    .t {
      width: 6.666667rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.4rem;
      color: #222222;
    }
    .b {
      margin-top: 0.053333rem;
      font-size: 0.32rem;
      color: #888888;
    }
  }
}
.addIdn {
  width: 2.346667rem;
  height: 0.8rem;
  background-color: #fd7f2c;
  border-radius: 0.133333rem;
  font-size: 0.346667rem;
  color: #ffffff;
  border: none;
  margin-top: 0.533333rem;
  display: flex;
  line-height: 0.8rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  > img {
    margin-right: 0.12rem;
    align-self: center;
    width: 0.32rem;
    height: 0.32rem;
  }
}
.no_data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 2.666667rem;
  > img {
    width: 4rem;
    height: 2.8rem;
  }
  .zw {
    font-size: 0.346667rem;
    color: #888888;
  }
}
.theend {
  font-size: 0.32rem;
  text-align: center;
  color: #888;
  padding-top: 0.8rem;
  span {
    color: #fd7f2c;
  }
}
</style>
